<script setup lang="ts">
  import useStore from '@/store'
import HomePanel from './HomePanel.vue'
  import {useLazy} from '@/utils/hooks'
  const { home } = useStore()
  const target = useLazy(()=>{
      home.getHotList()
  })
</script>
<template>
<div class="home-new">
 <div ref="target">
     <HomePanel title="人气推荐" sub-title="人气爆款 不容错过">

<!-- 面板内容 -->
<ul class="goods-list" v-if="home.hotGoodList.length>0">
  <li v-for="it in home.hotGoodList" :key="it.id">
    <RouterLink to="/">
      <img  alt="" v-lazy="it.picture">
      <p class="name ellipsis">{{it.title}}</p>
      <p class="desc">{{it.alt}}</p>
    </RouterLink>
  </li>
</ul>
<div class="home-skeleton" v-else>
      <div
        class="item"
        v-for="i in 4"
        :key="i"
        :style="{ backgroundColor: '#f0f9f4' }"
      >
        <XtxSkeleton bg="#e4e4e4" :width="306" :height="306" fade animated/>
        <XtxSkeleton bg="#e4e4e4" :width="160" :height="24" />
        <XtxSkeleton bg="#e4e4e4" :width="120" :height="24" />
      </div>
    </div>
</HomePanel>
 </div>
</div>
</template>
<style scoped lang="less">
  .goods-list {
    display: flex;
    justify-content: space-between;
    height: 406px;
    li {
      width: 306px;
      height: 406px;
      background-color: #fff;
      .hoverShadow();
      img {
        width: 306px;
        height: 306px;
      }
      p {
        font-size: 22px;
        padding: 12px 30px 0 30px;
        text-align: center;
        &.desc {
          color: #999;
          font-size: 18px;
        }
      }
    }
  }
  .home-skeleton {
  width: 1240px;
  height: 406px;
  display: flex;
  justify-content: space-between;
  .item {
    width: 306px;
    .xtx-skeleton ~ .xtx-skeleton {
      display: block;
      margin: 16px auto 0;
    }
  }
}
</style>